<template>
    <div>
        <!--查询条件start --111s-->
        <el-form :inline="true" :model="query" class="query-form" size="small">

            <el-form-item class="query-form-item">
                <el-input
                    v-model="query.content"
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="onSubmit"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item  label="一级分类">

                <!--<el-select v-model="query.topcategoryid"  placeholder="请选择" :onchange="topchange()">-->
                <el-select v-model="query.topcategoryid"  placeholder="请选择" :change="topchange()">
                    <el-option
                        v-for="(item,index) in category"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="二级分类">
                <el-select v-model="query.secondarycategoryid"  placeholder="请选择" clearable :change="secondchange()">
                    <el-option
                        v-for="(item,index) in busCommoditySecondaryCategoryList"
                        :key="index"
                        :label="item.secondarycategoryname"
                        :value="item.secondarycategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select v-model="query.thirdcategoryid"  placeholder="请选择" clearable>
                    <el-option
                        v-for="(item,index) in busCommodityThirdCategoryList"
                        :key="index"
                        :label="item.thirdcategoryname"
                        :value="item.thirdcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>

        </el-form>

        <!--列表start --222s-->
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            @selection-change="handleSelectionChange"
            border
        >
            <el-table-column type="selection" width="50" fixed/>
            <el-table-column label="商品ID" prop="commodityid" width="80" align="center"/>

            <el-table-column label="商品图片" prop="commodityicon" align="center" width="200">
                <template slot-scope="scope">
                    <el-popover v-if="scope.row.commodityicon" placement="right" trigger="hover">
                        <img :src="scope.row.commodityicon" style="width:400px;border-radius:3px;">
                        <img
                            slot="reference"
                            :src="scope.row.commodityicon"
                            style="max-height: 80px;max-width: 50px;border-radius:5px;"
                        >
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>


            <el-table-column label="商品名称" prop="commodityname" align="center"/>

            <el-table-column label="一级分类" prop="topcategoryname" align="center"/>
            <el-table-column label="二级分类" prop="secondarycategoryname" align="center"/>
            <el-table-column label="三级分类" prop="thirdcategoryname" align="center"/>

            <!--     <el-table-column label="操作" align="center">
                     <template slot-scope="scope">
                         <el-button
                             type="primary"
                             size="mini"
                             @click.native="detailForm(scope.$index, scope.row)"
                         >查看
                         </el-button>
                         <el-button
                             type="danger"
                             size="mini"
                             @click.native="handleDel(scope.row.userid)"
                         >删除
                         </el-button>
                     </template>
                 </el-table-column>-->
        </el-table>
        <!--列表end --222e-->

        <!--提交start-->

        <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px">

            <el-button @click="toggleSelection()" style="margin-right: 50px">取消</el-button>
            <el-button type="primary" @click.native="formSumbit()" :loading="formLoading">提交</el-button>
        </div>
        <!--提交start-->

        <!--分页模块start-->
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--分页模块end-->
    </div>
</template>
<script>
    import {getList,getCategory} from "../../api/buscommodity/buscommodity.js";
    export default {
        data() {
            return {
                query: {//查询条件
                    content:"",
                    currentPage: 1,
                    pageSize: 10,
                    topcategoryid:"", //一级
                    secondarycategoryid:"",//二级
                    thirdcategoryid:""//三级
                },
                list: [],//列表集合
                category:[],//分类列表
                busCommoditySecondaryCategoryList:[], //二级
                busCommodityThirdCategoryList:[],//三级
                totalNumber: 0,//分页总页数
                loading: true,//列表加载
                formLoading:false,//表单提交加载
                allLoding: false,//全屏加载
                cancelToggle:false,
                multipleSelection: [], //多选集合
            };
        },
        methods: {
            /*获取列表事件*/
            getList() {
                this.loading = true;
                getList(this.query).then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    this.list = response.data.list || [];

                    this.totalNumber = response.data.totalNumber || 0;
                    console.info(this.list)
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                }).catch(() => {
                    this.loading = false;
                    this.list = [];
                })
            },
            //一级
            topchange(){
                for(var i=0;i<this.category.length;i++){
                    if(this.category[i].topcategoryid==this.query.topcategoryid){
                        this.busCommoditySecondaryCategoryList = this.category[i].busCommoditySecondaryCategoryList;
                        break;
                    }
                }
            },
            //二级
            secondchange(){
                for(var i=0;i<this.busCommoditySecondaryCategoryList.length;i++){
                    if(this.busCommoditySecondaryCategoryList[i].secondarycategoryid==this.query.secondarycategoryid){
                        this.busCommodityThirdCategoryList = this.busCommoditySecondaryCategoryList[i].busCommodityThirdCategoryList;
                        break;
                    }
                }
            },
            //获得分类
            getAllCategory(){
                this.loading = true;
                getCategory()
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        let data=response.data || [];
                        this.category = data;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },
            /*新增或者编辑提交事件*/
            formSumbit() {
                console.log(this.multipleSelection)
                var ids = this.multipleSelection.map(item => item.commodityid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
                var name = this.multipleSelection.map(item => item.commodityname).join();
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.$emit("on-select", ids, false,name);

            },

            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.$router.push({
                    path: "",
                    query: this.query
                });
                this.getList();
            },

            /*刷新*/
            onRest() {
                this.$router.push({
                    path: ""
                });
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 10,
                };
                this.getList();
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },

            /*取消全选事件*/
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
               // this.$emit('update:dialogVisible',false)
                this.$emit("on-select", "", false,"");
            },

            /*列表复选框选择事件*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },

            /*全选删除事件*/
            delGroup() {
                console.log(this.multipleSelection)
                var ids = this.multipleSelection.map(item => item.userid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },

            /*选中事件*/
            handleDel(ids) {
                alert(ids);
            },
        },

        created() {
            this.getList();
            this.getAllCategory();
        }
    }

</script>
